<template>
    <div>
        <Breadcrumb name1="商品管理" name2="商品列表"></Breadcrumb>
        <el-card>
            <div class="search">
                <el-input placeholder="请输入内容" v-model="searchKeyword" clearable @clear="search">
                    <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
                </el-input>
                <el-button type="primary" @click="addGoods">添加商品</el-button>
            </div>
            <div>
                <el-table :data="goodsList" border stripe>
                    <el-table-column type="index"></el-table-column>
                    <el-table-column prop="goods_name" label="商品名称"></el-table-column>
                    <el-table-column prop="goods_price" label="商品价格（元）" width="120px"></el-table-column>
                    <el-table-column prop="goods_weight" label="商品重量" width="80px"></el-table-column>
                    <el-table-column prop="add_time" label="创建时间" width="140px"></el-table-column>
                    <el-table-column label="操作" width="130px">
                        <template slot-scope="scope">
                            <el-button type="primary" icon="el-icon-edit" size="mini" @click="updateDialog(scope.row.goods_id)"></el-button>
                            <el-button type="danger"  icon="el-icon-delete" size="mini" @click="deleteGoods(scope.row.goods_id)"></el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <!-- 分页 -->
                <pagination 
                    @handleSizeChange="handleSizeChange" 
                    @handleCurrentChange="handleCurrentChange"
                    :totalRecords="total">
                </pagination>
            </div>
        </el-card>

        <!-- 修改商品对话框 -->
        <el-dialog
            title="修改商品"
            :visible.sync="updateGoodsDialog"
            width="50%"
            @close="updateGoodsDialogClosed"
            append-to-body>
            <el-form :model="updateGoodsForm" :rules="updateGoodsFormRules" 
            ref="updateGoodsFormRef" label-width="70px">
                <el-form-item label="商品名称" prop="goods_name">
                    <el-input v-model="updateGoodsForm.goods_name"></el-input>
                </el-form-item>
                <el-form-item label="价格" prop="goods_price">
                    <el-input v-model="updateGoodsForm.goods_price"></el-input>
                </el-form-item>
                <el-form-item label="数量" prop="goods_number">
                    <el-input v-model="updateGoodsForm.goods_number"></el-input>
                </el-form-item>
                <el-form-item label="重量" prop="goods_weight">
                    <el-input v-model="updateGoodsForm.goods_weight"></el-input>
                </el-form-item>
                <el-form-item label="介绍">
                    <el-input v-model="updateGoodsForm.goods_introduce"></el-input>
                </el-form-item>
                <el-form-item label="上传的图片临时路径">
                    <el-input v-model="updateGoodsForm.pics"></el-input>
                </el-form-item>
                <el-form-item label="商品的参数">
                    <el-input v-model="updateGoodsForm.attrs"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer">
                <el-button @click="updateGoodsDialog = false">取 消</el-button>
                <el-button type="primary" @click="updateGoods">确 定</el-button>
            </span>
        </el-dialog>

    </div>
</template>

<script>
import { request } from '../../../api/axios'
import Breadcrumb from "../components/Breadcrumb.vue"
export default {
    components:{ Breadcrumb },
    data(){
        return{
            // 查询商品信息渲染的参数
            goodsInfo:{
                query: '',
                pagenum: 1,     //第几页
                pagesize: 5,     //一页几条数据
            },
            // 商品列表数据
            goodsList:[],
            total:0,

            // 搜索框输入关键词
            searchKeyword:"",

            // 修改商品信息对话框的显示与隐藏
            updateGoodsDialog:false,
            // 根据id请求来的修改商品的表单数据
            updateGoodsForm:{},
            updateGoodsFormRules:{},
            // 发送修改用户的请求参数
            updateGoodsInfo:{
                goods_name:"",
                goods_price:0,
                goods_number:0,
                goods_weight:0,
                goods_introduce:"",
                pics:[],
                attrs:[]
            }
        }
    },
    created(){
        this.getGoodsList()
    },
    methods:{
        getGoodsList(){
            request("get","goods",this.goodsInfo)    //1.8.1
            .then(res =>{
                console.log(res)
                if(res.meta.status==200){
                    this.$message.success('获取商品列表成功')
                    this.goodsList=res.data.goods
                    this.total = res.data.total
                }
            })
        },

        // 搜索查询
        search(){
            this.goodsInfo.query=this.searchKeyword
            this.getGoodsList()
        },

        // 分页
        handleSizeChange(val) {
            this.goodsInfo.pagesize = val
            this.getGoodsList();
        },
        //第几页
        handleCurrentChange(val) {
            this.goodsInfo.pagenum = val
            this.getGoodsList();
        },

        // 添加商品按钮，跳转至添加商品页面
        addGoods(){
            this.$router.push({name:"addGoods"})
        },

        // 点击修改用户按钮打开修改用户对话框
        updateDialog(id){
            console.log(id)
            this.updateGoodsDialog=true
            request("get","goods/"+id)      //1.8.3
            .then(res =>{
                console.log(res)
                this.updateGoodsForm=res.data
            })
        },
        updateGoods(){},
        updateGoodsDialogClosed(){},

        // 删除商品
        deleteGoods(id){
            console.log(id)
            this.$confirm('此操作将永久删除该商品, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                request("delete","goods/"+id)    //1.8.5
                .then( res =>{
                    console.log(res)
                    if(res.meta.status==200){
                        this.$message.success('删除商品成功')
                        this.getGoodsList()
                    }else{this.$message.error('删除商品失败')}
                })
            })
        }
    }
}
</script>

<style scoped>
.search .el-input{
    width: 40%;
    margin-right: 20px;
}
.el-table{
    margin-top: 15px;
}
</style>